I fear there may be more wrong than just that bit... The editor and view are no longer matching in some situations.

View:

Editor:

I think that we've made some incorrect assumptions about "How to identify containers that inherit layout" and how we should be applying that padding (the editor is applying the container- class to ALL containers regardless of if they inherit layout, define layout sizes or not) and this might need a deeper dive considering the "flex" layout in play.

However the mismatch pictured above is wrong in /trunk, not caused by this change, so I believe it to be a separate-but-related issue. I'm keen to bring this change in now. I tried as many nested container situations as I could think of and (other than the problem in the editor noted above) this seems to be a step in the right direction.

I'm definitely keen for others to look at this too though.

I think the problem with this approach is that nested "inherit layout" containers don't collapse margins.

Take this example markup:

<!-- wp:group {"backgroundColor":"secondary","textColor":"background","layout":{"inherit":true}} -->
<div class="wp-block-group has-background-color has-secondary-background-color has-text-color has-background"><!-- wp:paragraph -->
<p>this is a group</p>
<!-- /wp:paragraph -->

<!-- wp:group {"backgroundColor":"selection","layout":{"inherit":true}} -->
<div class="wp-block-group has-selection-background-color has-background"><!-- wp:paragraph -->
<p>this is a group inside a group</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

For this case we get this:

So the child "inherit layout" block inherits additional unexpected padding...

I fixed the nested containers with the extra padding. Still not happy with this alignments file...

I just gave this another spin. Instead of adding padding to every block, I'm trying to add it to the container, then find the exceptions when we don't want that padding to be applied.

I'm trying to think about what we are trying to achieve and what are all the possible cases:

We want our blocks to have padding on mobile so that it's not touching the borders of the viewport, except for alignfull blocks. But when the alignfull block is a group and it contains text, this exception to the rule makes it look bad (like @jffng pointed out on the screenshot above). Should the exception be that only certain blocks that are alignfull should be going to the edges of the viewport then (cover, image, group with a background color...)?

And in the case of the alignfull group blocks, if we want padding inside them, we can just add them to the block pattern/template, instead of having an overall css rule, we may not want to have it the same way in every case?

Concepts merged with #4459 which has shipped.
I believe this can be closed.